<template>
	<view class="one_box">
		<view class="content1">
			<view class="circle">
				<image :src="avatar" mode="scaleToFill" v-if="userToken" />
				<text class="hilton hilton-denglu" v-else @click="$emit('isLogin')"></text>
			</view>
		</view>

		<view class="content2">
			<view class="content2-left">
				<view class="CurrentCredits">
					当前积分
				</view>
				<view class="zero">
					{{ points }}
				</view>
			</view>

			<view class="content2-right">
				<view class="MemberID">
					会员编码
				</view>
				<view class="content2_number">
					<view class="number">
						{{ userInfo.id || '--' }}
					</view>
					<image src="/static/images/HiltonHotel/copy.png" mode="" class="copy" @click="copyNumber">
					</image>
				</view>
			</view>
		</view>

		<view class="MemberExclusiveRate" @click="setPopupStated">
			<view class="left">
				<image src="/static/images/HiltonHotel/finger.png" mode="" class="finger"></image>
				<view class="vip">
					会员专享房价
				</view>
			</view>
			<view class="right">
				<view class="text" v-if="userToken">全部{{ memberInfo!=null && memberInfo.interestList != null ? memberInfo.interestList.length : 0 }}项礼遇</view>
				<image src="/static/images/HiltonHotel/arrow.png" mode="" class="arrow"></image>
			</view>
		</view>
		<!-- 会员专享房价弹窗 -->
		<template v-if="showMembershipRatePop">
			<MembershipRatePop :typeList="memberList" @close="showMembershipRatePop=false"></MembershipRatePop>
		</template>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import {
		memberList
	} from '../../api/member';
	import HiltonHotelDataVue from '../../components/HiltonHotelData/HiltonHotelData.vue';
	import MembershipRatePop from '../../components/HiltonHotelData/MembershipRatePop/MembershipRatePop.vue';
	import HeadBox from './HeadBox.vue';
	import copy from '../../utils/copy.js';
	import {
		showToast,
	} from "../../utils/promise"
	import { getPointsTotal } from '../../api/points'
	export default {
		props:{
			memberInfo:{}
		},	
		data() {
			return {
				showMembershipRatePop: false,
				memberList: [],
				points: '--'
			}
		},
		computed: {
			...mapState(['userInfo', 'userToken']),
			avatar() {
				return this.userInfo.avatar ||
					'https://hilton-duoladuo.oss-cn-shenzhen.aliyuncs.com/basic-common/upload/680ae589463da387fd39ef10.jpg'
			}
		},
		watch: {
			userToken: {
				handler(val) {
					if (val) {
						this.getMemberList()
						this.getPoints()
					}
				},
				immediate: true
			}
		},
		components: {
			HiltonHotelDataVue,
			MembershipRatePop,
			HeadBox
		},
		methods: {
			copyNumber() {
				copy(this.userInfo.id)
			},
			setPopupStated() {
				if (!this.userToken) {
					showToast({
						icon: "none",
						title: "请登陆后重试"
					})
					return
				}
				this.showMembershipRatePop = true
			},
			async getMemberList() {
				await memberList().then((res) => {
					const {
						code,
						data,
						msg
					} = res
					if (code !== 0) {
						return
					}
					this.memberList = data
				}).catch((err) => {
					console.log(err)
				})
			},
			async getPoints() {
				try {
					const res = await getPointsTotal()
					this.points = res.data
				} catch (err) {
					console.log(err)
				}
			},
		},
	}
</script>
<style lang="less" scoped>
	.one_box {
		box-sizing: border-box;
		width: 690rpx;
		border-bottom-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		background: #FFFFFF;
		margin: 0 auto;
		padding: 30rpx;

		.content1 {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 30rpx;

			.hilton {
				color: green;
			}

			.circle {
				width: 160rpx;
				height: 160rpx;
				background: #D9D9D9;
				border-radius: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.hilton {
					text-align: center;
					font-size: 70rpx;
					color: rgb(137, 137, 137);
				}

				button {
					display: grid;
					place-content: center;
					border: none;
					background-color: transparent;
					border-color: transparent;
					border-style: none;
					border-radius: 100%;
				}

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
		}

		.content2 {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;

			.content2-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 10rpx;
			}

			.content2-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				row-gap: 10rpx;

				.content2_number {
					display: flex;
					align-items: center;
					column-gap: 10rpx;
				}
			}
		}

		.CurrentCredits {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 26rpx;
			letter-spacing: 0px;
			text-align: center;
			color: #979797;
		}

		.MemberID {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 26rpx;
			letter-spacing: 0px;
			color: #979797;
		}

		.zero {
			font-family: 'PingFang SC';
			font-weight: 600;
			font-size: 40rpx;
			letter-spacing: 0px;
			text-align: center;
			color: #222222;
		}

		.number {
			font-family: 'PingFang SC';
			font-weight: 600;
			font-size: 40rpx;
			letter-spacing: 0px;
			text-align: right;
			color: #222222;
		}

		.copy {
			width: 40rpx;
			height: 40rpx;
		}

		.MemberExclusiveRate {
			box-sizing: border-box;
			padding: 25rpx 20rpx;
			border-radius: 16rpx;
			background: #FFF4DB;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.finger {
					width: 40rpx;
					height: 40rpx;
					border-width: 1px;
				}

				.vip {
					font-family: 'PingFang SC';
					font-weight: 400;
					font-size: 28rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #804040;
					margin-left: 20rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-family: 'PingFang SC';
					font-weight: 400;
					font-size: 28rpx;
					letter-spacing: 0px;
					text-align: right;
					color: #804040;
				}

				.arrow {
					width: 32rpx;
					height: 32rpx;
					border-width: 2rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
</style>